<template>
	<div>
		<div class="type-nav">
			<div class="container">
				<div @mouseleave="leaveIndex" @mouseenter="enterShow">
					<h2 class="all">全部商品分类</h2>
					<!-- 
						过渡动画
					  前提：要有v-if|v-show
					 -->
					<transition name="sort">
						<div class="sort" v-show="show">
							<div class="all-sort-list2" @click="goSearch">
								<!-- 一级分类 -->
								<div
									class="item"
									v-for="(c1, index) in categoryList"
									:key="c1.categoryId"
									@mouseenter="changeIndex(index)"
									:class="{ active: currentIndex === index }"
								>
									<h3>
										<a :data-categoryName="c1.categoryName" :data-category1Id="c1.categoryId">{{ c1.categoryName }}</a>
									</h3>
									<div class="item-list clearfix" :style="{ display: currentIndex === index ? 'block' : 'none' }">
										<!-- 二级分类 -->
										<div class="subitem" v-for="(c2, index) in c1.categoryChild" :key="c2.categoryId">
											<dl class="fore">
												<dt>
													<a :data-categoryName="c2.categoryName" :data-category2Id="c2.categoryId">{{
														c2.categoryName
													}}</a>
												</dt>
												<dd>
													<!-- 三级分类 -->
													<em v-for="(c3, index) in c2.categoryChild" :key="c3.categoryId">
														<a :data-categoryName="c3.categoryName" :data-category3Id="c3.categoryId">{{
															c3.categoryName
														}}</a>
													</em>
												</dd>
											</dl>
										</div>
									</div>
								</div>
							</div>
						</div>
					</transition>
				</div>

				<nav class="nav">
					<a href="###">服装城</a>
					<a href="###">美妆馆</a>
					<a href="###">尚品汇超市</a>
					<a href="###">全球购</a>
					<a href="###">闪购</a>
					<a href="###">团购</a>
					<a href="###">有趣</a>
					<a href="###">秒杀</a>
				</nav>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex';
import throttle from 'lodash/throttle';
export default {
	name: 'TypeNav',
	data() {
		return {
			currentIndex: -1,
			show: true
		};
	},
	mounted() {
		// 控制三级菜单的显示和隐藏
		if (this.$route.path !== '/home') {
			this.show = false;
		}
	},
	computed: {
		...mapState({
			categoryList: state => state.home.cateGoryList
		})
	},
	methods: {
		// 鼠标移入添加类名
		changeIndex: throttle(function (i) {
			this.currentIndex = i;
		}, 10),
		/**
		 * 鼠标移出清除类名+隐藏三级菜单
		 */
		leaveIndex() {
			// 鼠标移出清除类名
			this.currentIndex = -1;
			// 隐藏三级菜单
			if (this.$route.path !== '/home') {
				this.show = false;
			}
		},
		/**
		 * 事件委派跳转到search页面
		 */
		goSearch(e) {
			e.preventDefault();
			let element = e.target;

			// 结构参数
			let { categoryname, category1id, category2id, category3id } = element.dataset;

			// 如果点击的元素身上有categoryname属性就代表点击的是a标签
			if (categoryname) {
				// 整理参数
				let location = { name: 'search' };
				let query = { categoryName: categoryname };

				// 通过设置自定义属性，判断点击的是几级分类
				if (category1id) {
					query.category1Id = category1id;
				} else if (category2id) {
					query.category2Id = category2id;
				} else {
					query.category3Id = category3id;
				}

				// 整理完参数
				location.query = query;
				// 如果路由跳转时，url中有params参数，也要带上
				if (this.$route.params) {
					location.params = this.$route.params;
				}
				// 跳转search页面并携带参数
				this.$router.push(location);
			}
		},
		/**
		 * 鼠标移入三级菜单区域，让三级菜单显示
		 */
		enterShow() {
			this.show = true;
		}
	}
};
</script>

<style lang="less" scoped>
.type-nav {
	border-bottom: 2px solid #e1251b;

	.container {
		width: 1200px;
		margin: 0 auto;
		display: flex;
		position: relative;

		.all {
			width: 210px;
			height: 45px;
			background-color: #e1251b;
			line-height: 45px;
			text-align: center;
			color: #fff;
			font-size: 14px;
			font-weight: bold;
		}

		.nav {
			a {
				height: 45px;
				margin: 0 22px;
				line-height: 45px;
				font-size: 16px;
				color: #333;
			}
		}

		.sort {
			position: absolute;
			left: 0;
			top: 45px;
			width: 210px;
			height: 461px;
			position: absolute;
			background: #fafafa;
			z-index: 999;

			.all-sort-list2 {
				.item {
					h3 {
						line-height: 30px;
						font-size: 14px;
						font-weight: 400;
						overflow: hidden;
						padding: 0 20px;
						margin: 0;

						a {
							color: #333;
						}
					}

					.item-list {
						display: none;
						position: absolute;
						width: 734px;
						min-height: 460px;
						background: #f7f7f7;
						left: 210px;
						border: 1px solid #ddd;
						top: 0;
						z-index: 9999 !important;

						.subitem {
							float: left;
							width: 650px;
							padding: 0 4px 0 8px;

							dl {
								border-top: 1px solid #eee;
								padding: 6px 0;
								overflow: hidden;
								zoom: 1;

								&.fore {
									border-top: 0;
								}

								dt {
									float: left;
									width: 54px;
									line-height: 22px;
									text-align: right;
									padding: 3px 6px 0 0;
									font-weight: 700;
								}

								dd {
									float: left;
									width: 415px;
									padding: 3px 0 0;
									overflow: hidden;

									em {
										float: left;
										height: 14px;
										line-height: 14px;
										padding: 0 8px;
										margin-top: 5px;
										border-left: 1px solid #ccc;
									}
								}
							}
						}
					}
				}
			}
		}

		// 过渡动画
		// 过渡开始状态（进入）
		.sort-enter {
			opacity: 0;
		}
		// 过渡动画结束状态
		.sort-enter-to {
			opacity: 1;
		}
		// 过渡动画事件，速率
		.sort-enter-active {
			transition: opacity 0.2s ease-in;
		}
	}
}
.active {
	background-color: red;
}
</style>
